<script lang="ts" setup>
import { computed, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { add, getById, update } from '@/api/dict_header'

const props = defineProps({
  id: {
    type: [Number],
    default: 0,
  },
  modelValue: {
    type: Boolean,
    default: false,
  },
})
const emit = defineEmits(['update:modelValue', 'success'])
const formRef = ref<FormInstance>()
const loading = ref(false)
const form = ref({
  id: props.id,
  label: '',
  name: '',
  status: '',
  sort: 999,
  desc: '',
})
const formRules = ref<FormRules>({
  label: [
    { required: true, message: '请输入标签', trigger: 'blur' },
  ],
  name: [
    { required: true, message: '请输入编号', trigger: 'blur' },
  ],
  status: [
    { required: true, message: '请输入状态', trigger: 'blur' },
  ],
})
const myVisible = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emit('update:modelValue', val)
  },
})

const title = computed(() => props.id === 0 ? '新增' : '编辑')
onMounted(() => {
  if (form.value.id !== 0) {
    getInfo()
  }
})

function getInfo() {
  loading.value = true
  getById(form.value.id).then((res: any) => {
    loading.value = false
    form.value = res.data
  })
}
function onSubmit() {
  if (form.value.id === 0) {
    formRef.value && formRef.value.validate((valid) => {
      if (valid) {
        form.value.sort = Number.parseInt(`${form.value.sort}`)
        add(form.value).then((res: any) => {
          if (res.code !== 200) {
            ElMessage.error({
              message: res.msg,
              center: true,
            })
          }
          else {
            ElMessage.success({
              message: '新增条目成功',
              center: true,
            })
          }
          emit('success')
          onCancel()
        })
      }
    })
  }
  else {
    formRef.value && formRef.value.validate((valid) => {
      if (valid) {
        form.value.sort = Number.parseInt(`${form.value.sort}`)
        update(form.value).then((res: any) => {
          if (res.code !== 200) {
            ElMessage.error({
              message: res.msg,
              center: true,
            })
          }
          else {
            ElMessage.success({
              message: '编辑条目成功',
              center: true,
            })
          }
          emit('success')
          onCancel()
        })
      }
    })
  }
}

function onCancel() {
  myVisible.value = false
}
</script>

<template>
  <div>
    <el-dialog
      v-model="myVisible" :title="title" width="600px" :close-on-click-modal="false" append-to-body
      destroy-on-close
    >
      <div v-loading="loading">
        <el-form ref="formRef" :model="form" :rules="formRules" label-width="120px" label-suffix="：">
          <el-form-item label="名称" prop="label">
            <el-input v-model="form.label" placeholder="请输入标签" />
          </el-form-item>
          <el-form-item label="编码" prop="code">
            <el-input v-model="form.name" placeholder="请输入编码" />
          </el-form-item>
          <el-form-item label="使能" prop="status">
            <el-radio-group v-model="form.status" size="default">
              <el-radio label="0">
                使能
              </el-radio>
              <el-radio label="1">
                关闭
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input v-model="form.sort" type="number" placeholder="请输入排序" />
          </el-form-item>
          <el-form-item label="描述" prop="desc">
            <el-input v-model="form.desc" :row="2" type="textarea" placeholder="备注说明" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <el-button size="large" @click="onCancel">
          取消
        </el-button>
        <el-button type="primary" size="large" @click="onSubmit">
          确定
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>
